<template>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
<!--  头部导航栏下的副导航栏-->
<div id="sub-banner">
  <div class="qsub-container">
    <ul class="sub-list">
<!--      elementIU，文字链接-->
      <li><el-link :underline="false" style="color: #1E80FF">推荐</el-link></li>
      <li><el-link :underline="false">关注</el-link></li>
<!--      elementUI弹出层，悬浮时显示子标签-->
<<<<<<< HEAD

=======
=======
<div id="sub-banner">
  <div class="qsub-container">
    <ul class="sub-list">
      <li><el-link :underline="false">推荐</el-link></li>
      <li><el-link :underline="false">关注</el-link></li>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      <li v-for="(item,index) in subitems" :key="index">
        <el-popover
            placement="top-start"
            width="300"
            size="mini"
            :open-delay=300
            trigger="hover">
          <div>
            <el-tag v-for="(tag,index) in item.tags" :key="index" type="info" class="tags">{{ tag }}</el-tag>
          </div>
          <el-link :underline="false" slot="reference">{{ item.name }}</el-link>
        </el-popover>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: "subBanner",
  data () {
    return{
      subitems:[
        {name:'后端',tags:['后端','Java','Python','Go','MySQL','Spring Boot','Redis','Linux','数据库','Spring','架构','设计模式','JVM','LeeCode']},
        {name:'前端',tags:['前端','JavaScript','Vue.js','CSS','React.js','算法','面试','TypeScript','Webpack','Node.js','微信小程序','LeeCode','HTML','Flutter','Element']},
        {name:'Android',tags:['Android','前端','Flutter','Kotlin','Android Jetpack','Java','架构','面试','音视频开发','安全','源码','gradle','算法','设计模式','鸿蒙OS']},
        {name:'IOS',tags:['IOS','Objective-c','Swift','前端','面试','Flutter','SwiftUI','macOS','算法','架构','性能优化','源码','OpenGL','Apple','CocoaPods']},
        {name:'人工智能',tags:['人工智能','Python','MATLAB','深度学习','算法','机器学习','后端','数据分析','OpenCV','大数据','计算机视觉','数据挖掘','神经网络','前端','NLP']},
        {name:'开发工具',tags:['GitHub','Git','前端','后端','Linux','Unity3D','开源','Java','Docker','程序员','设计','测试','动效','Python','增强现实']},
        {name:'代码人生',tags:['算法算法','程序员','LeeCode','Python','测试','后端','Java','前端','设计模式','面试','Linux','JavaScript','MATLAB','安全','GitHub']},
        {name:'阅读',tags:['笔记','程序员','前端','后端','测试','算法','JavaScript','Kubernetes','资讯','面试','运维','数据库','掘金翻译计划','音视频开发','网络协议']}
      ]
    }
  }
}
</script>

<style>
#sub-banner{
  width: 100%;
  margin-top: 60px;
  background-color: #fff;
  border-top: 1px solid #f1f1f1;
  height: 45px;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0px;
  z-index: 2;
  box-shadow: 0 0 4px #f0f0f0;
}
.qsub-container{
  width: 960px;
  margin: 0 auto;
}
.sub-list{
  display: flex;
  line-height: 45px;
}
.sub-list li{
  padding: 0 15px;
}
.sub-list li:first-child{
  padding-left: 0;
}
.tags{
  margin: 5px;
  border-radius: 40px;
  cursor: pointer;
}
.tags:hover{
  color: #1E80FF;
}
</style>